<!DOCTYPE html>
<html>
<head>
<title>1.Babylon基础</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* GitHub stylesheet for MarkdownPad (http://markdownpad.com) */
/* Author: Nicolas Hery - http://nicolashery.com */
/* Version: b13fe65ca28d2e568c6ed5d7f06581183df8f2ff */
/* Source: https://github.com/nicolahery/markdownpad-github */

/* RESET
=============================================================================*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

/* BODY
=============================================================================*/

body {
  font-family: Helvetica, arial, freesans, clean, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  padding: 20px;
  max-width: 960px;
  margin: 0 auto;
}

body>*:first-child {
  margin-top: 0 !important;
}

body>*:last-child {
  margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
  margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
  font-size: inherit;
}

h1 {
  font-size: 28px;
  color: #000;
}

h2 {
  font-size: 24px;
  border-bottom: 1px solid #ccc;
  color: #000;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 14px;
}

h6 {
  color: #777;
  font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
  margin-top: 0;
  padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
  margin-top: 0;
  padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
  margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
  color: #4183C4;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
  padding-left: 30px;
}

ul li > :first-child, 
ol li > :first-child, 
ul li ul:first-of-type, 
ol li ol:first-of-type, 
ul li ol:first-of-type, 
ol li ul:first-of-type {
  margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
  margin-bottom: 0;
}

dl {
  padding: 0;
}

dl dt {
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  padding: 0;
  margin: 15px 0 5px;
}

dl dt:first-child {
  padding: 0;
}

dl dt>:first-child {
  margin-top: 0px;
}

dl dt>:last-child {
  margin-bottom: 0px;
}

dl dd {
  margin: 0 0 15px;
  padding: 0 15px;
}

dl dd>:first-child {
  margin-top: 0px;
}

dl dd>:last-child {
  margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
  font-size: 12px;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
  margin: 0 0px;
  padding: 0px 0px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px;
}

pre>code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent;
}

pre {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px;
}

pre code, pre tt {
  background-color: transparent;
  border: none;
}

kbd {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #DDDDDD;
    background-image: linear-gradient(#F1F1F1, #DDDDDD);
    background-repeat: repeat-x;
    border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
    border-image: none;
    border-radius: 2px 2px 2px 2px;
    border-style: solid;
    border-width: 1px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 10px;
    padding: 1px 4px;
}

/* QUOTES
=============================================================================*/

blockquote {
  border-left: 4px solid #DDD;
  padding: 0 15px;
  color: #777;
}

blockquote>:first-child {
  margin-top: 0px;
}

blockquote>:last-child {
  margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
  clear: both;
  margin: 15px 0;
  height: 0px;
  overflow: hidden;
  border: none;
  background: transparent;
  border-bottom: 4px solid #ddd;
  padding: 0;
}

/* TABLES
=============================================================================*/

table th {
  font-weight: bold;
}

table th, table td {
  border: 1px solid #ccc;
  padding: 6px 13px;
}

table tr {
  border-top: 1px solid #ccc;
  background-color: #fff;
}

table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

/* IMAGES
=============================================================================*/

img {
  max-width: 100%
}
</style>
</head>
<body>
<h1>Babylon基础</h1>
<hr />
<h2>准备</h2>
<ol>
<li>支持WebGL的浏览器</li>
<li>下载<a href="http://www.bootcdn.cn/babylonjs/" title="打开链接自行选择下载">babylon.js</a></li>
<li>
<p>创建一个HTML文件并添加以下代码：</p>
<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html&quot; charset=&quot;utf-8&quot;/&gt;
&lt;title&gt;Babylon - Getting Started&lt;/title&gt;
&lt;!--- link to the last version of babylon ---&gt;
&lt;script src=&quot;babylon.js&quot;&gt;&lt;/script&gt;
    &lt;style&gt;
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }

        #renderCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;canvas id=&quot;renderCanvas&quot;&gt;&lt;/canvas&gt;
&lt;script&gt;
    window.addEventListener('DOMContentLoaded', function(){
        // 获取canvas元素
        var canvas = document.getElementById('renderCanvas');
        // 加载3D引擎
        var engine = new BABYLON.Engine(canvas, true);
        // 创建场景(scene)的方法,并且返回scene
        var createScene = function(){
            //创建一个基本的场景
            var scene = new BABYLON.Scene(engine);
            //创建一个类型为Free的相机,并把它放置在空间坐标(0，5,-10)的位置
            var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);
            //将摄像机与画布相关联
            camera.attachControl(canvas, false);                
            //将摄像机对准空间坐标原点(0,0,0)
            camera.setTarget(BABYLON.Vector3.Zero());
            //创建一个基本的灯光,（0,1,0）光源方向指向上方
            var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
            //创建一个基本的球
            var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);
            //将球移动y=1的位置
            sphere.position.y = 1;
            //创建一个地面
            var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);
            //返回创建的场景
            return scene;
    }
    //调用创建场景的方法
    var scene = createScene();
    //运行循环渲染方法
    engine.runRenderLoop(function(){
        scene.render();
    });
    //canvas或者window页面resize事件
    window.addEventListener('resize', function(){
        engine.resize();
    });
});
</code></pre>

<p></script>
</body>
</html></p>
</li>
</ol>
<h2>场景</h2>
<h3>createScene（创建场景）</h3>
<p>每一个在Babylon.js里的场景一般来说都包含3样东西：</p>
<ol>
<li>
<p><mark>A Camera（摄像机）</mark>：</p>
<p>在Babylon中，有许多种摄像机可用，可以添加任意数量的摄像机到场景中，但只有一个处于激活状态。最常见的是以下三种：</p>
<ol>
<li>ArcRotateCamera(弧形旋转摄像机？)</li>
<li>FreeCamera(自由摄像机？)</li>
<li>TouchCamera(触摸摄像机？)</li>
</ol>
</li>
<li>
<p><mark>A Light（光源）</mark>:</p>
<p>在BabyLon中，可以添加任意数量的光源，但是只有在光源列表得到前4个可以被应用到场景中。有四个基本类型的光源可用，分别是：</p>
<ol>
<li>PointLight（点光源）</li>
<li>SpotLight（）</li>
<li>DirectionalLight（）</li>
<li>HemisphericLight（半球光）</li>
</ol>
<p>光源并不是一个绝对的要求--可有可无；好的建议是总会添加一个半球光？</p>
</li>
<li>
<p><mark>A Shape（模型）</mark>：</p>
<p>模型，场景中的物体对象。也被称作Mesh（网），模型由网格构成</p>
</li>
</ol>
<h2>Babylon.js的Object(对象)/Properties(属性)/Methods(方法)/Values(值)</h2>
<h3>这里的Object（对象），并不是现实中的Object（对象），而是Javascript Object（js对象）</h3>
<p>在Babylon.js中常用的对象被叫做<mark>engine、scene、canvas、mesh、light、camera、Vector3、Color3、ActionManager、Animation</mark>.</p>
<p>比如下面的每一行都创建了一个或者多个JS对象:</p>
<pre><code>// Create a BABYLON.Engine type of object.
var engine = new BABYLON.Engine(canvas, true);
// Creates a BABYLON.Scene type of object.
var scene = new BABYLON.Scene(engine);
// Creates a BABYLON.FreeCamera type of object
var camera = new BABYLON.FreeCamera(&quot;freecam&quot;, new BABYLON.Vector3(0, 0, 5), scene);
// Creates a BABYLON.DirectionalLight type of object
var light = new BABYLON.DirectionalLight(&quot;Dir0&quot;, new BABYLON.Vector3(0, -1, 0), scene);
// Creates a BABYLON.Mesh type of object
var mybox = BABYLON.Mesh.CreateBox(&quot;box&quot;, 6.0, scene);

每一个这样的对象都封装了很多东西在里面，通过get/set的方式来存储和查看所存储的值。这样的值存储对象称为Properties对象。
</code></pre>

<h3>Properties</h3>
<p>Properties用来存储值（set和get的形式），这些值为Babylon.js框架所用，用来渲染场景；</p>
<pre><code>light.intensity = 0.5;
这里我们在light对象中‘set’了一个‘intensity’属性，它的值为0.5；
light:property对象;
itensity:property对象下的一个Name;
0.5 : 赋值value;
</code></pre>

<h3>Methods</h3>
<p>Method用来存储Js代码到Js对象中。方法是用来调用的</p>
<pre><code>scene.getMeshByName('Box');
这里，我们调用了一个位于scene对象中的getMeshByName()方法。括号中的'box'是一个参数，一些方法需要一个或者多个参数，也有一些方法不需要参数。

var box_I_made = scene.getMeshByName(&quot;box&quot;);
这里，我们调用了一个方法，并传了一个之前穿件好的box对象。在得到了那个参数后，我们可以在它上面做一些事，比如set值：
box_I_made.rotation.y = Math.PI/2;  //在Y轴旋转90°
</code></pre>

<h3>Values</h3>
<p>有两种类型的值对象在Babylon.js中常用<mark>Vector3</mark>和<mark>Color3</mark></p>
<h4>Vector3</h4>
<p>Vector3值的形式</p>
<pre><code>BABYLON.Vector3(xValue,yValue,zValue);
</code></pre>

<p>通常用来存储：</p>
<pre><code>- 网格、光源或者摄像机对象的位置
- 网格对象的旋转属性
- 网格对象的缩放比例属性
- 光源的方向
</code></pre>

<p>Vector3的3个参数的值是<mark>Float类型</mark>的,可以是负值、正值，没有明确的限制。</p>
<p>来看看Vector3在一个网格对象的position的使用：</p>
<pre><code>box.position = new BABYLON.Vector3(0,10,0);
xValue为0，表示box位于x坐标的中心位置;
yValue为10,表示box位于y轴上方10个单位处；
zValue为0，表示box位于z轴中心位置；
</code></pre>

<p>在看看Vector3用来设置旋转值：</p>
<pre><code>box.rotation = new BABYLON.Vector3(Math.PI/4,0,0);
我们的盒子沿着X轴旋转了45°，在Babylon.js中，是以弧度来旋转，当然也可以用Float表示：

（45°）Math.PI/4 ≈ 0.707
（90°）Math.PI/2 ≈ 1.57
（180°）Math.PI ≈ 3.14
（360°）Math.PI*2 ≈ 6.28

保证旋转的范围在 -6.28到+6.28 范围内，超出这个范围的旋转将无意义；
</code></pre>

<p>在看看Vector3用来设置在网格上的缩放(伸展和收缩):</p>
<pre><code>box.scaling = new BABYLON.Vector3(1, 1, 3);
如果Vector3的三个参数都为1，表示在XYZ轴上没有缩放；
这里zValue的值为3，表示沿着Z轴放大我们的网格为原来的3倍；
</code></pre>

<p>另外一个用处是用来控制光源的方向：</p>
<pre><code>mySpotLight.direction = new BABYLON.Vector3(0,-1,0);


【注意】当Vector3用来设置光源方向时，xValue,yValue,zValue的范围为-1到+1；
</code></pre>

<h4>Color3</h4>
<p>Color3的值类似于Vector3的值</p>
<pre><code>BABALON.Color3(rValue,gValue,bValue);
rValue代表红色；
gValue代表绿色；
bValue代表蓝色；
所有的范围都是（0,1）之间，并且以Float形式表示。

BABYLON.Color3(1, 0, 0) - red
BABYLON.Color3(0, 1, 1) - cyan
BABYLON.Color3(0, 1, 0) - green
BABYLON.Color3(1, 0, 1) - violet
BABYLON.Color3(1, 1, 0) - yellow
BABYLON.Color3(0, 0, 0) - black
BABYLON.Color3(1, 1, 1) - white
BABYLON.Color3(0.5, 0.5, 0.5) - medium gray
BABYLON.Color3(0.2, 0, 0.2) - dark purple
</code></pre>

<p>如果你想设置一个你创建好的颜色到Box上，第一件要做的事是：创建一个名为<mark>StandardMaterial</mark>的Js对象,接着，把创建好的对象应用到box的<mark>.maetrial</mark>属性上。这点会在后面说到，我们不妨先来看看:</p>
<pre><code>var myMaterial = new BABYLON.StandardMaterial(&quot;mymat&quot;, scene);
myBox.material = myMaterial;
</code></pre>

<p>第一行代码创建了一个StandardMaterial并把它放入了一个名为myMaterial的变量中；<br>
第二行代码将上面创建新建的Material应用到box的&quot;.material&quot;属性上。
Box的外表并不会改变，因为我们并没有给StandardMaterial任何信息。<br>So...</p>
<pre><code>myMaterial.diffuseColor = new BABYLON.Color3(0,0.5,0);
.diffuseColor属性是StandardMaterial对象众多属性的一个。
.diffuseColor是最原始的方法用来设置颜色。
</code></pre>

<p>现在，我们的盒子变为medium green(gValue = 0.5)了;</p>
<p>另外一个用处是用来设置光源的颜色</p>
<pre><code>myLight.diffuse = new BABYLON.Color3(0.5, 0, 0);
.diffuse是用来设置光源的颜色，注意别和.diffuseColor混淆了。
</code></pre>


</body>
</html>
<!-- This document was created with MarkdownPad, the Markdown editor for Windows (http://markdownpad.com) -->
